<!DOCTYPE html>
<html lang="vi">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <script src="dist/js/bootstrap.js" type="text/javascript"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>Demo Sign In</title>
    </head>

    <body style="padding-bottom: 70px;">
        <header>
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html" data-toggle="tooltip" data-placement="left" title="brand">
                            <span class="glyphicon glyphicon-send"></span>
                        </a>
                    </div>
                    <p class="navbar-text" data-toggle="tooltip" data-placement="left" title="Site name">FASmile <span class="badge">42</span></p>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active" data-toggle="tooltip" data-placement="bottom" title="Home page">
                                <a href="index.html">
                                    <span class="glyphicon glyphicon-home"></span>
                                    Index
                                </a>
                            </li>
                            <li>
                                <a href="signin.html" data-toggle="tooltip" data-placement="left" title="register page">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                    Sign In 
                                </a>
                            </li>
                            <li>
                                <a href="view.html" data-toggle="tooltip" data-placement="left" title="View page">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                    View 
                                </a>
                            </li>
                            <li>
                                <a href="post.html" data-toggle="tooltip" data-placement="left" title="Post page">
                                    <span class="glyphicon glyphicon-file"></span>
                                    Post 
                                </a>
                            </li>
                            <li>
                                <a href="upload.html" data-toggle="tooltip" data-placement="left" title="Upload page">
                                    <span class="glyphicon glyphicon-open"></span>
                                    Upload 
                                </a>
                            </li>
                            <li>
                                <a href="list.html" data-toggle="tooltip" data-placement="left" title="List page">
                                    <span class="glyphicon glyphicon-th-list"></span>
                                    List 
                                </a>
                            </li>
                        </ul>

                        <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                                <button type="submit" class="btn btn-default">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                </button>

                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </header>


        <footer class="container">
            <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
                <div class="container">
                    <address>
                        <font color="red"><strong>Author: </strong></font><font color="green"><strong>Lương Thế Hai</strong></font>
                        <br/>
                        <strong>Email: </strong><a href="#">FASmile1404@gmail.com</a>
                    </address>
                </div>
            </nav>

        </footer>


        <div class="container" style="margin-top: 55px; width: 80%;">
            <div class="alert alert-success" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <strong>Thông báo !</strong> Đăng nhập thành công !
            </div>

            <div class="alert alert-info" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <strong>Thông báo !</strong> Cập nhật thành công !
            </div>

            <div class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <strong>Thông báo !</strong> Sai username hoặc password
            </div>

            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <strong>Thông báo !</strong> Có lỗi sảy ra !
            </div>

            <span class="label label-default">Default</span>
            <span class="label label-primary">Primary</span>
            <span class="label label-success">Success</span>
            <span class="label label-info">Info</span>
            <span class="label label-warning">Warning</span>
            <span class="label label-danger">Danger</span>

            <div id="FormLogin">
                <form role="form">
                    <div class="input-group">
                        <span class="input-group-addon">Username</span>
                        <input type="text" class="form-control" placeholder="Username"/>
                    </div>
                    <div class="alert alert-danger" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span class="sr-only">Error:</span>
                        Enter username !
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">Password</span>
                        <input type="text" class="form-control" placeholder="Password"/>
                    </div>
                    <div class="alert alert-danger" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span class="sr-only">Error:</span>
                        Enter password !
                    </div>
                </form>

                <button type="button" class="btn btn-success" id="btnLogin">Login</button>
                <!-- Small modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#FormRegister">Register</button>
            </div>


            <div class="modal fade bs-example-modal-sm" id="FormRegister" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="register-title">
                            <h2 class="modal-title" style="text-align: center;">Register</h4>
                        </div>
                        <form role="form">
                            <div class="input-group">
                                <span class="input-group-addon">Username</span>
                                <input type="text" class="form-control" placeholder="Username"/>
                            </div>
                           
                            <div class="input-group">
                                <span class="input-group-addon">Password</span>
                                <input type="text" class="form-control" placeholder="Password"/>
                            </div>
                            
                            <div class="input-group">
                                <span class="input-group-addon">Email</span>
                                <input type="text" class="form-control" placeholder="Email"/>
                            </div>
                            
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>